<template>
    <div class="session-list-item-style" @click="toChat(item)">
        <!-- 引用 ChatItemHead 组件 -->
        <session-list-item-head :headUrl="item.headUrl" :unread="item.unread" />
        <div class="chat-item-content-super-style">
        <div class="chat-item-name-style">{{ item.name }}</div>
        <text class="chat-item-content-style">{{ item.lastMsgContent }}</text>
        </div>
        <div class="chat-item-status-super-style">
        <div class="chat-item-time-style">{{ item.lastMsgTimeStr }}</div>
        </div>
    </div>
    <div class="list-divide-line" style="width: 79.5%; margin-left: 20.5%"></div>
</template>
<script lang="ts">
import SessionListItemHead from './session-list-item-head.vue';
import { onMounted, onUnmounted } from 'vue';
import type { PropType } from 'vue';
import type { SessionItem } from '../im-type/im-chat-type';
import { defineComponent } from 'vue';

export default defineComponent({
    // 会话列表项
    name: 'session-list-item',
    components: {
        SessionListItemHead
    },
    props: {
        item: {
            type: Object as PropType<SessionItem>,
            required: true
        },
        length: {
            type: Number,
            required: true
        },
        index: {
            type: Number,
            required: true
        }
    },
    setup() {
        const toChat = (item: any) => {
            console.log('session-list-item 开始对话',item);
        }
        onMounted(() => {
            console.log('session-list-item onMounted');
        })
        onUnmounted(() => {
            console.log('session-list-item onUnmounted');
        })

        return {
            toChat
        }
    }
})

</script>

<style scoped>
.session-list-item-style{
    width:100%;
    display: flex;
    align-items: center;
    position: relative;
}
.chat-item-content-super-style{
    display: flex;
    flex-direction: column;
    width: 60%;
}

.chat-item-name-style{
    color: #666666;
    font-size: 32px;
    margin-bottom: 14px;
}
.chat-item-content-style{
    min-height: 20px;
    width: 100%;
    color: #666666;
    font-size: 26px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.chat-item-status-super-style{
    position: absolute;
    right: 5%;
    top: 10%;
    display:flex;
    flex-direction: column;
    align-items:flex-end;
}
.chat-item-time-style{
    color: #999999;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: right;
}

</style>
